<template>
	<div style="display: flex;width: 100%;">
		<div style="margin: auto; width: 100%;">
			
			<!-- 头部 -->
			<div class="div_btn">
				<div class="div_btn_content" align="left">
					<el-button @click="isShow_l" type="text">导航</el-button>
					<el-button type="text" @click="onFirsPage">首页</el-button>
					<el-button type="text" @click="onPrevPage">上一页</el-button>
					<span style="color: #797979; margin-left: 10px;margin-right: 10px;">{{pageNum}}/{{pageCount}}</span>
					<el-button type="text" @click="onNextPage">下一页</el-button>
					<el-button type="text" @click="onLastPage">末页</el-button>
				</div>
				<div class="div_btn_content" align="center">
					<!-- 中间 -->
					<!-- 缩放 -->
					<!-- <el-button type="text" @click="changeBig">放大</el-button>
					<el-button type="text" @click="changeSmall">缩小</el-button> -->
					<div class="block base_div">
					    <el-slider v-model="scale" @change="changeSuoFang" show-input></el-slider>
					</div>
				</div>
				<div class="div_btn_content" align="center">
					<!-- 下载 -->
					<el-button type="text" @click="onLastPage">下载</el-button>
					<!-- 全屏 -->
					<el-button type="text" @click="screen">全屏</el-button>
					<!-- <el-button @click="isShow_r" type="text">右侧</el-button> -->
				</div>
			</div>
			<!-- 内容部分 -->
			<div class="content">
				<div class="div_book_left">
					<div class="base_book_left">
						<!-- 左侧内容 -->
						<div align="left">生成模版印章：</div>
						<el-input v-model="inputSealName" placeholder="请输入印章名"></el-input>
						<div class="temp_seal_base">
							<div class="temp_seal_base_div">
								<div class="temp_seal_base_body" @click="insertSeal(1)">
									<div class="temp_seal_base_div_content">
										<img class="temp_seal_base_img" src="../../public/static/img/tempSeal1.png" />
									</div>
								</div>
								<div class="temp_seal_base_body" @click="insertSeal(2)">
									<div class="temp_seal_base_div_content">
										<img class="temp_seal_base_img" src="../../public/static/img/tempSeal2.png" />
									</div>
								</div>
							</div>
							<div class="temp_seal_base_div">
								<div class="temp_seal_base_body" @click="insertSeal(3)">
									<div class="temp_seal_base_div_content">
										<img class="temp_seal_base_img" src="../../public/static/img/tempSeal3.png" />
									</div>
								</div>
							</div>
						</div>
						<div align="left">
							结果：
							<!--json美化的组件Api地址
							https://github.com/chenfengjw163/vue-json-viewer/blob/master/README_CN.md -->
							<json-viewer :value="showtext" :expand-depth="4" copyable sort ></json-viewer>
						</div>
					
					
					</div>
				</div>
				<div class="div_book">
					<div class="content_read_pdf base_scrollbar" id="pdf_show">
						<canvas id="pdf_canvas" @mousedown="clickPdfPos" @mousemove="divFlying"></canvas>
					</div>
				</div>
				
				<div class="div_book_right" >
					<!-- 右侧内容 -->
					<div class="base_book_right">
						<div align="left">
							<el-button type="text" style="color: #409EFF;" @click="beginSign">开始盖章</el-button>
							<el-button type="text" style="color: #409EFF;" @click="endSign">取消盖章</el-button>
						</div>
						<!-- 印章 -->
						<div id="yz" :style="yzStyle">
							<img :src="yzImgUrl" width="80px" style="padding: 10px;" />
						</div>
						
					</div>
				</div>
			</div>
			<!-- 尾部 -->
			<div>
				
			</div>
		</div>
		<!-- 左侧导航 -->
		<el-drawer size='24%' :append-to-body="true" :visible.sync="drawer_l" :direction="direction_l"  :withHeader="false">
			<div>
				<div plain class="left_content base_scrollbar">
					<div id="leftContainer" align="center">
						<div v-for="i in pageCount">
						     <div :id="cre_page_(i)" class="left_pdf_xx" @click="onRomPage(i)">
								 <canvas :id='cre_canvas_(i)'></canvas>
								 <div>第{{i}}页</div>
							 </div>
						</div>
					</div>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
import PDFJS from 'pdfjs-dist';
import apiURL from '../httpConfig/api.js';

export default {
  name: 'PdfShow',
  props: {
  },
  data () {
    return {
	drawer_l: true,//是否显示左侧导航
	direction_l: 'ltr',//左侧导航标识
	fullscreen:false,//全屏显示
	fileUrl:"/static/test.pdf",//默认显示的pdf文件路径
    pdfDoc: "",
    pageNum: 1,//当前页码
	pageCount: 1,//总页数
    pageRendering: false,
    pageNumPending: 1,
	scale: 33,//pdf显示的滑动块默认大小
	scaleInfo: 1.0,//显示区放大缩小
	scaleList: 0.4,//导航区放大缩小
	xzdh:"",//选中pdf
	radio: 3,//单选按钮
	divFlyingUse:false,//是否盖章：turn，false
	yz_x:"",
	yz_y:"",
	inputSealName:"张三",//模版印章名
	showtext: '结果集显示',//结果集显示
	yzImgUrl:"/static/img/logo.png",//签署印章默认图
	yzStyle:{border:"1px solid #409EFF",width:"100px",height:"100px"}//需要盖章的印章样式
   }
  },
  created(){
	 this.getParams();
  },
   mounted(){//初始化加载
		//刷新pdf显示与左侧
	   //this.updateShowPDF(this.fileUrl);
	   //显示pdf显示
	   this.getPdfInfo(this.fileUrl,this.scaleInfo);
	   //显示左侧
	   this.getPdfList(this.fileUrl,this.scaleList);
	   this.drawer_l=false;
	   
	   var dragImg = document.getElementById("yz");
	   this.yz_x = dragImg.offsetLeft;
	   this.yz_y = dragImg.offsetTop;
     },
	watch:{
		//监听路由的状态，只要变化了就调用获取路由参数的方法将数据存储本在组件中
		'$route':'getParams'
	},
	methods: {
		
	   //路由参数
	   getParams(){
		  var routerParams=this.$route.params.fileId
		  //判断传递过来的
		  if(routerParams != null && routerParams != ''){
			  this.fileUrl=apiURL+'/access/downloadPDFByUUid?fileUid='+routerParams;
		  }
	   },
	   //动态生成divid
	   cre_page_:function(index){
	   	return "page_"+index;
	   },
	   cre_canvas_:function(index){
	   	return "canvas_"+index;
	   },
		//显示左侧导航
		isShow_l(done){
			this.drawer_l=!this.drawer_l;
		},
	   //刷新文件显示
		updateShowPDF(fileUrl){
			console.log(fileUrl);
			//显示pdf信息
			this.getPdfInfo(fileUrl,this.scaleInfo);
			this.getPdfList(fileUrl,this.scaleList);
		 },
	    //显示pdf信息
		getPdfInfo(url,scaleInfo){
			var _this = this;
			//正文显示部分
			PDFJS.getDocument(url).then(function(pdfDoc_) {
				_this.pdfDoc = pdfDoc_;
				_this.pageCount = _this.pdfDoc.numPages;//赋值pdf总页数
				_this.renderPage(_this.pageNum,_this.scaleInfo);
			});
		 },
		 //渲染某页pdf内容
		 renderPage(num,scaleInfo) {
			 this.pageRendering = true;
			 let _this = this;
			 let canvas = document.getElementById('pdf_canvas')
			 var ctx = canvas.getContext('2d');
			 this.pdfDoc.getPage(num).then(function (page) {
				  var viewport = page.getViewport(_this.scaleInfo)
				  canvas.height = viewport.height
				  canvas.width = viewport.width
				  //canvas渲染
				  var renderContext = {
				   canvasContext: ctx,
				   viewport: viewport
				  }
				  var renderTask = page.render(renderContext)
				  renderTask.promise.then(function () {
				   _this.pageRendering = false
				   //判断当前指定的默认显示页码，如果不为空则显示
				   if (_this.pageNumPending !== null) {
					_this.renderPage(_this.pageNumPending)
					_this.pageNumPending = null
				   }
				  })
			 })
		},
		/**
		  *显示pdf左侧导航 
		  *注：由于是静态页面，所以如果pdf文件过大 
		  *可能会造成性能问题，后续添加至项目中，
		  *以下方式将修改为预浏览分页方式
		  **/
		getPdfList(url,size) {
			var _this = this;
			//正文显示部分
			PDFJS.getDocument(url).then(function(pdfDoc_) {
				_this.pdfDoc = pdfDoc_;
				_this.pageCount = _this.pdfDoc.numPages;//赋值pdf总页数
				_this.pageRendering = true;
				var pdfCountPages=pdfDoc_.numPages;
				for (var j = 1; j<= pdfCountPages; j++) {
					_this.renderPages(j,_this.scaleList);
				}
			});
		},
		//渲染左侧某页pdf内容
		renderPages(num,scaleInfo) {
			 this.pageRendering = true;
			 let _this = this;
			 let canvas = document.getElementById('canvas_'+num);
			 var ctx = canvas.getContext('2d');
			 this.pdfDoc.getPage(num).then(function (page) {
				  var viewport = page.getViewport(scaleInfo)
				  canvas.height = viewport.height
				  canvas.width = viewport.width
				  //canvas渲染
				  var renderContext = {
				   canvasContext: ctx,
				   viewport: viewport
				  }
				  var renderTask = page.render(renderContext)
				  renderTask.promise.then(function () {
				   _this.pageRendering = false
				   //判断当前指定的默认显示页码，如果不为空则显示
				   if (_this.pageNumPending !== null) {
					_this.renderPage(_this.pageNumPending)
					_this.pageNumPending = null
				   }
				  })
			 })
		},
		//渲染队列
		queueRenderPage(num,scaleInfo) {
			if (this.pageRendering) {
				this.pageNumPending = num;
			} else {
				this.renderPage(num,this.scaleInfo);
			}
		},
		//第一页
		onFirsPage() {
			this.pageNum=1;
			this.queueRenderPage(this.pageNum,this.scaleInfo);
		},
		//最后一页
		onLastPage(){
			this.pageNum=this.pdfDoc.numPages;
			this.queueRenderPage(this.pageNum,this.scaleInfo);
		},
		//上一页
		onPrevPage() {
			if (this.pageNum <= 1) {
				alert("已经是第一页");
				return;
			}
			this.pageNum--;
			this.queueRenderPage(this.pageNum,this.scaleInfo);
		},
		//下一页
		onNextPage() {
			if (this.pageNum >= this.pdfDoc.numPages) {
				alert("已经是最后一页");
				return;
			}
			this.pageNum++;
			this.queueRenderPage(this.pageNum,this.scaleInfo);
		},
		//导航栏点击跳转页数
		onRomPage:function(pageNums){
			this.pageNum=pageNums;
			this.queueRenderPage(this.pageNum,this.scaleInfo);
			this.xzdh=pageNums;
		},
		//放大
		changeBig(){
			this.scaleInfo = this.scaleInfo+0.2;
			if((this.scaleInfo+0.2)>=3){
				this.scaleInfo=3;
			}
			this.queueRenderPage(this.pageNum,this.scaleInfo);
		},
		//缩小
		changeSmall(){
			this.scaleInfo = this.scaleInfo-0.2;
			if((this.scaleInfo-0.2)<=1){
				this.scaleInfo=1.0;
			}
			this.queueRenderPage(this.pageNum,this.scaleInfo);
		},
		//缩放
		changeSuoFang(val) {
			var scale =val / 100;
			this.scaleInfo = 3*scale;
			//alert("滑块百分比："+scale+",显示："+this.scaleInfo);
			this.queueRenderPage(this.pageNum,this.scaleInfo);
			return scale;
		},
		//全屏显示
		screen(){
			// let element = document.documentElement;//设置后就是我们平时的整个页面全屏效果
			let element = document.getElementById('pdf_show');//设置后就是   id=pdf_show 的容器全屏
			  if (this.fullscreen) {
				  // 如果已经全屏了就退出全屏
				if (document.exitFullscreen) {
				  document.exitFullscreen();
				} else if (document.webkitCancelFullScreen) {
				  document.webkitCancelFullScreen();
				} else if (document.mozCancelFullScreen) {
				  document.mozCancelFullScreen();
				} else if (document.msExitFullscreen) {
				  document.msExitFullscreen();
				}
			  } else {
				// 如果不是全屏就变成全屏
				if (element.requestFullscreen) {
				  element.requestFullscreen();
				} else if (element.webkitRequestFullScreen) {
				  element.webkitRequestFullScreen();
				} else if (element.mozRequestFullScreen) {
				  element.mozRequestFullScreen();
				} else if (element.msRequestFullscreen) {
				  // IE11
				  element.msRequestFullscreen();
				}
			  }
			  //因为全屏显示时候不带全屏显示按钮，所以注释以下代码
			  // this.fullscreen = !this.fullscreen;
		},
		//点击pdf获取位置信息
		clickPdfPos(e){
			//先判断是否有印章
			
			//获取canvas
			let canvas = document.getElementById('pdf_canvas');
			//计算canvas鼠标点击的位置
			var mousePos = canvas.getBoundingClientRect();
			var x = event.clientX - mousePos.left * (canvas.width / mousePos.width);
			var y = event.clientY - mousePos.top * (canvas.height / mousePos.height);
			console.log("pdf的宽度"+canvas.width+",以及高度"+canvas.height+"\n点击位置是 x:"+x+",y:"+y);
			alert("pdf的宽度"+canvas.width+",以及高度"+canvas.height+"\n点击位置是 x:"+x+",y:"+y);
			
			//显示印章位置
			this.divFlyingUse=false;
			this.yzStyle={
				border:"1px solid #409EFF",width:"100px",height:"100px"
			}
		},
		//印章跟随鼠标移动
		divFlying(){
			if(this.divFlyingUse){
				var div = document.getElementById("yz");
				if (!div) {
					return;
				}
				// 滚动条位置
				var sl=document.body.scrollTop || document.documentElement.scrollTop;
				var st=document.body.scrollLeft || document.documentElement.scrollLeft;
				// 全屏位置
				var zX = window.event.clientX;
				var zY = window.event.clientY;
				div.style.left =zX+st+"px";
				div.style.top = zY+10+sl + "px";
			}
		},
		//开始盖章
		beginSign(){
			this.divFlyingUse=true;
			this.yzStyle={
				border:"1px solid #409EFF",width:"100px",height:"100px",position:"absolute"
			}
		},
		//取消盖章
		endSign(){
			var div = document.getElementById("yz");
			if (!div) {
				return;
			}
			//变为原来的位置
			div.style.left = this.yz_x+"px";
			div.style.top = this.yz_y+"px";
			//变为初始化的印章图片
			this.yzImgUrl="/static/img/logo.png";
			this.divFlyingUse=false;
			this.yzStyle={
				border:"1px solid #409EFF",width:"100px",height:"100px"
			}
			
		},
		//点击印章类型
		insertSeal(tempSealType){
			if(this.inputSealName==''||this.inputSealName == null){
				alert("请输入印章名称");
				return ;
			}
			var _this=this;
			this.$http.post('/access/tempSeal',{
				sealName:_this.inputSealName,
				sealType:tempSealType
			}).then((res)=>{
				console.log(res.data);
				_this.showtext =res.data;//显示值
				//将生成的印章图片赋值显示出来
				_this.yzImgUrl=apiURL+'/access/downloadFileByUUid?fileUid='+res.data.object;
			}).catch((err)=>{
			   alert("请求失败") 
			})
		}
		
	}
  }
</script>

<style scoped>

/* pdf显示的左侧内容 */
.div_book_left{
	margin-top: 15px;
	background-color: #FFFFFF;
	width: 20%;
	height: 900px;
}
/* pdf显示 */
.div_book{
	height: 900px;
	width: 60%;
	overflow: auto;
	margin-top: 15px;
	margin-left: 10px;
	margin-right: 10px;
	/* background-color: #fff; */
	box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .05);
	-webkit-box-shadow: #c5caca 0px 0px 10px;
	-moz-box-shadow: #c5caca 0px 0px 10px; 
}

.div_book_right{
	margin-top: 15px;
	background-color: #FFFFFF;
	width: 20%;
	height: 900px;
}

.content_read_pdf{
	margin: auto;
	padding-bottom: 30px;
	padding-top: 20px;
	overflow: auto;
	text-align: center;
	white-space: nowrap;
}
.div_btn{
	width: 100%;
	display: flex;
	justify-content:space-between;
	height: 50px;
	background-color: #FFFFFF;
	
}
.div_btn_content{
	width: 33%;
	line-height: 50px;
}
.base_content{
	display: flex;
}
.base_div{
	line-height: 50px;
	margin-right: 10px;
}

/* 中间内容显示 */
.content{
	display: flex;
	justify-content: space-between;
	padding-left: 20px;
	padding-bottom: 20px;
	padding-right: 20px;
}

.left_content{
	height: 750px;
	overflow: auto;
	padding: 10px;
	border-top: 1px #CCCCCC solid;
}

/*左侧导航显示样式*/
.left_pdf_xx{
	border: 1px dashed #CCCCCC;
	margin:0 auto;
	width: 95%;
	margin-bottom: 20px;
}
.left_pdf_xx:hover{
	margin:0 auto;
	width: 95%;
	margin-bottom: 20px;
	border: 1px solid #409EFF;
}

/*左侧导航鼠标放上去显示示样式*/
.left_pdf_sx{
	margin:0 auto;
	width: 95%;
	margin-bottom: 20px;
	border: 1px solid #409EFF;
}
/*左侧导航选择后显示的样式*/
.left_pdf_xz{
	position: relative;
	margin:0 auto;
	width: 95%;
	margin-bottom: 20px;
	border: 1px solid #409EFF;
}

/*滚动条整体样式*/
.base_scrollbar::-webkit-scrollbar {
	width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
	height: 5px;
}
/*滚动条里面小方块*/
.base_scrollbar::-webkit-scrollbar-thumb {
	border-radius: 10px;
	 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
	background: #409EFF;
}
/*滚动条里面轨道*/
.base_scrollbar::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.01);
	border-radius: 10px;
	background: #FFFFFF;
	
}

/* 登陆按钮样式 */
.el-button--text{
	color: #797979 !important;
	font-size: 16px;
}
/* 缩放 */
.block{
	margin-top: 7px !important;
}

/* 右侧内容 */
.base_book_right{
	padding: 15px;
}
/* 左侧内容 */
.base_book_left{
	padding: 15px;
}

/** 模版印章显示 **/
.temp_seal_base{
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}
.temp_seal_base_div{
	flex-basis: 100%;
	display: flex;
	ustify-content: space-between;
	margin-top: 10px;
	margin-bottom: 10px;
}
.temp_seal_base_body{
	width: 50%;
	margin: auto;
}
.temp_seal_base_div_content{
	width: 100px;
	height: 100px;
	box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .05);
	-webkit-box-shadow: #c5caca 0px 0px 10px;
	-moz-box-shadow: #c5caca 0px 0px 10px;
}
.temp_seal_base_div_content:hover{
	box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .05);
	-webkit-box-shadow: #409eff 0px 0px 10px;
	-moz-box-shadow: #409eff 0px 0px 10px;
}
.temp_seal_base_img{
	margin: 10px;
	width: 80px;
	height: 80px;
}
</style>
